<template>
  <van-popup v-model:show="popupVisible" position="bottom" @close="onPopupClose">
    <van-picker
      v-bind="$attrs"
      v-model="selectedValues"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onPopupClose"
    />
  </van-popup>
</template>
<script lang="ts" setup>
  import { ref, unref, watchEffect } from 'vue';
  import { props as TimeRangePickerProps } from './types';
  import { useColumns } from './composable/useColumns';
  const props = defineProps(TimeRangePickerProps);
  interface Emits {
    /* 显示窗口 */
    (e: 'update:visible', value: boolean): void;
    /* 更新时间段 */
    (e: 'update:times', value: string[]): void;
    /** 确认事件 */
    (e: 'confirm'): void;
  }
  const emits = defineEmits<Emits>();

  /** 选择的值 */
  const selectedValues = ref<string[]>([]);

  /** 窗口是否显示 */
  const popupVisible = ref(false);
  watchEffect(() => {
    popupVisible.value = props.visible;

    if (props.times.length > 0) {
      if (props.times.length !== 3) {
        // eslint-disable-next-line no-console
        console.warn('时间格式错误');
      } else {
        /** 开始时间 分秒 */
        const startTimes = props.times[0].split(':');
        /** 结束时间 分秒 */
        const endTimes = props.times[1].split(':');
        if (startTimes.length !== 3) throw new Error('开始时间格式错误');
        else if (endTimes.length !== 3) throw new Error('结束时间错误');
        selectedValues.value = [
          startTimes[0],
          startTimes[1],
          startTimes[2],
          props.apart,
          endTimes[0],
          endTimes[1],
          endTimes[2],
        ];
      }
    }
  });

  const { columns } = useColumns(props);

  /** 选择时间段取消事件 */
  const onPopupClose = () => {
    emits('update:visible', false);
  };

  /** 确定按钮单击事件 */
  const onConfirm = () => {
    const onValue = unref(selectedValues.value).filter((item) => item !== props.apart);
    emits('update:times', [
      `${onValue[0]}:${onValue[1]}:${onValue[2]}`,
      `${onValue[3]}:${onValue[4]}:${onValue[5]}`,
    ]);
    emits('confirm');
    onPopupClose();
  };
</script>
<script lang="ts">
  export default { name: 'TimeRangePicker' };
</script>
